<!--组件库管理主界面-->

<template>
  <div class="compinfo-manage">
    <Button type="primary" class="m-r-5px" @click="openCompinfoTypeForm('add')"><Icon type="md-add"/> 创建分组</Button>
    <Tooltip placement="top" content="刷新数据">
      <Button class="m-r-5px" type="primary" @click="loadCompinfoTypes">
        <Icon type="md-refresh"/>
      </Button>
    </Tooltip>
    <Button v-if="node_env === 'develop'" type="primary"
            @click="openCompFileForm">初始化组件相关文件
    </Button>
    <div class="m-b-10px"></div>
    <Table :columns="columns" :data="tableData" :loading="loading"></Table>
    <Page size="small" class="m-t-5px float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
          show-elevator show-total @on-change="loadCompinfoTypes">
    </Page>

    <CompinfoTypeForm ref="compinfoTypeForm" @refreshDataList="loadCompinfoTypes"></CompinfoTypeForm>
    <CompFileForm ref="compFileForm"></CompFileForm>

  </div>
</template>

<script>
import CompinfoTypeForm from './CompinfoTypeForm'
import CompinfoTypeTableExpand from './CompinfoTypeTableExpand'

import ManageMixin from '../../../../mixin/ManageMixin'
import CompFileForm from "./CompFileForm";

export default {
  name: 'CompinfoManage',
  mixins: [ManageMixin],
  components: {
    CompFileForm,
    CompinfoTypeForm
  },
  data() {
    return {
      node_env: process.env.NODE_ENV,

      loading: false,
      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(CompinfoTypeTableExpand, {
              props: {
                compinfoTypeId: params.row.id
              }
            })
          }
        },
        {
          title: '组名',
          key: 'name'
        },
        {
          title: '描述',
          key: 'remark'
        },
        {
          title: '排序',
          key: 'sort'
        },
        {
          title: '图标',
          key: 'icon'
        },
        {
          title: '创建日期',
          key: 'create_date'
        },
        {
          title: '操作',
          key: 'action',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  size: 'small',
                  type: 'primary',
                  icon: 'md-create'
                },
                'class': {
                  'm-r-5px': true
                },
                on: {
                  click: () => {
                    this.openCompinfoTypeForm('edit', params.row.id)
                  }
                }
              }),
              h('Poptip', {
                props: {
                  confirm: true,
                  transfer: true,
                  'word-wrap': true,
                  placement: 'top-end',
                  title: '您确定要删除此项吗？'
                },
                style: {},
                on: {
                  'on-ok': () => {
                    this.deleteCompinfoType(params.row.id)
                  }
                }
              }, [
                h('Button', {
                  props: {
                    size: 'small',
                    type: 'error',
                    icon: 'md-trash'
                  }
                },)
              ])
            ]);
          }
        }
      ],
    }
  },
  mounted() {
    this.loadCompinfoTypes();
  },
  methods: {
    loadCompinfoTypes() {
      this.loading = true
      this.$PnApi.CompinfoApi.getCompinfoTypeByPage(this.pageIndex, this.pageSize).then(result => {
        this.tableData = result.data.payload.list;
        this.pageTotal = result.data.payload.total;
        this.loading = false
      })
    },

    openCompinfoTypeForm(type, id) {
      if (type == 'add') {
        this.$refs.compinfoTypeForm.init();
      } else if (type == 'edit') {
        this.$refs.compinfoTypeForm.init(type, id);
      }
    },

    deleteCompinfoType(id) {
      this.$PnApi.CompinfoApi.deleteCompinfoType(id).then(result => {
        if (result.data.success) {
          this.loadCompinfoTypes();
          this.$Message.success(result.data.message)
        }
      });
    },

    openCompFileForm() {
      this.$refs.compFileForm.init()
    }
  },
  computed: {}
}
</script>

<style scoped>
>>> td.ivu-table-expanded-cell {
  padding: 10px 20px 10px 20px;
}
</style>
